<template>
    <div class="a-control-group" :class="[`direction-${props.direction}`, props.withSpace ? 'with-space' : '']" :style="style">
        <slot></slot>
    </div>
</template>

<style lang="scss">
@import "../scss/vars";

.a-control-group {
    &.direction-h {
        &>*:not(:last-child):not(.sharp) {
            border-top-right-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }

        &>*:not(:first-child):not(.sharp) {
            border-top-left-radius: unset !important;
            border-bottom-left-radius: unset !important;
        }

        &>.a-control-group:not(:last-child)>*:not(.sharp) {
            border-top-right-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }

        &>.a-control-group:not(:first-child)>*:not(.sharp) {
            border-top-left-radius: unset !important;
            border-bottom-left-radius: unset !important;
        }

        &.with-space>*:not(:last-child) {
            margin-right: 1px;
        }
    }

    &.direction-v {
        flex-direction: column;

        &>*:not(:last-child):not(.sharp) {
            border-bottom-left-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }

        &>*:not(:first-child):not(.sharp) {
            border-top-left-radius: unset !important;
            border-top-right-radius: unset !important;
        }

        &>.a-control-group:not(:last-child)>*:not(.sharp) {
            border-bottom-left-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }

        &>.a-control-group:not(:first-child)>*:not(.sharp) {
            border-top-left-radius: unset !important;
            border-top-right-radius: unset !important;
        }

        &.with-space>*:not(:last-child) {
            margin-bottom: 1px;
        }
    }
}
</style>

<script setup lang="ts">
import { DirectionType, LayoutType } from '@/types'
import { computed } from 'vue'

interface PropsType {
    direction?: DirectionType
    /**
     * 是否是块级元素，默认为false，即行内元素，样式为inline-flex，如果block为true，则样式为flex
     */
    block?: boolean
    /**
     * 组件间是否有间隔
     */
    withSpace?: boolean
    /**
     * 布局类型，可选flex、grid、block，默认为flex
     */
    type?: LayoutType
}
const props = withDefaults(defineProps<PropsType>(), {
    direction: 'h',
    block: false,
    withSpace: false,
    type: 'flex'
})

const style = computed(() => {
    if (props.type === 'flex') {
        if (props.block) {
            return 'display: flex'
        }
        return 'display: inline-flex'
    }
    if (props.type === 'grid') {
        if (props.block) {
            return 'display: grid'
        }
        return 'display: inline-grid'
    }
    if (props.block) {
        return ''
    }
    return 'display: inline-block'
})
</script>